import React, { Component } from 'react'

import './index.css'

export default class Lists extends Component {
    render() {
        const { users,isFirst,isLoading,err } = this.props
        return (
            <div className="lists">
                {
                    isFirst ? <h2 style={{ marginTop:'20px' }}>欢迎来到github，请输入你想搜索的name</h2> :
                    isLoading ? <h2 style={{ marginTop:'20px' }}>数据加载中.....</h2> : 
                    err ? <h2 style={{ marginTop:'20px' }}>{ err }</h2> :
                    users.map((usersObj)=>{
                        return(
                            <div key={ usersObj.id } className="item">
                                <a rel="noreferrer"  href={ usersObj.html_url  } target="_blank">
                                    <img style={{width: "150px",height: "150px"}} src={ usersObj.avatar_url } alt="head_portrait" />
                                    <p>{ usersObj.login }</p>
                                </a>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}
